<template>
	<div>
		<p class="title">待办事项</p>
		<van-field v-model.trim="name" @keyup.enter="enterName" center clearable label="输入新任务" placeholder="请填写任务">
			<template #button>
				<van-button icon="plus" size="small" type="primary" @click="enterName">增加</van-button>
			</template>
		</van-field>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
			}
		},
		methods: {
			enterName() {
				this.$emit('addTodo', this.name) //emit前一定要加上$
				this.name = ''
			}
		}
	}
</script>

<style scoped>
	.title {
		font-size: 36px;
		font-weight: 400;
		text-align: center;
		color: #b83f45;
	}
</style>